<template>
<!-- 关联节点信息的查看 -->

<div>
  <div class="node-wrap" v-if="nodeConfig.type != 4">
    <div class="node-wrap-box" :data-state="nodeConfig.nodeStyle" :class="(nodeConfig.type == 0?'start-node ':'')+(isTried && nodeConfig.error?'active error':'')">
      <div>
        <div class="title" :style="'background: rgb('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
          <span class="iconfont" v-show="nodeConfig.type==1"></span><!-- 审核人图标 -->
          <span class="iconfont" v-show="nodeConfig.type==2"></span><!-- 抄送人图标 -->
          <span v-if="nodeConfig.type == 0">{{nodeConfig.nodeName}}</span><!-- 基本为发起人 -->

          <!-- S 发起人双状态 -->
          <input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type != 0 && isInput" v-focus v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]">
          <!-- E 发起人双状态 -->

          <!-- S 审批、抄送人双状态 -->
          <span class="editable-title" v-if="nodeConfig.type != 0 && !isInput">{{nodeConfig.nodeName}}</span>
          <!-- E 审批、抄送人双状态 -->

          <!-- S 删除节点-->
          <!-- <i class="anticon anticon-close close" v-if="nodeConfig.type != 0" @click="delNode()"></i> -->
          <!-- E 删除节点-->

        </div>
        <div class="content">
          <div class="text" v-if="nodeConfig.type == 0">{{$func.arrToStr(flowPermission)?$func.arrToStr(flowPermission):'所有人'}}</div>
          <div class="text" v-if="nodeConfig.type==1">
            <span class="placeholder" v-if="!$func.setApproverStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
            {{$func.setApproverStr(nodeConfig)}}
          </div>
          <div class="text" v-if="nodeConfig.type==2">
            <span class="placeholder" v-if="!$func.copyerStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
            {{$func.copyerStr(nodeConfig)}}
          </div>
          <i class="anticon anticon-right arrow"></i>
        </div>
        <div class="error_tip" v-if="isTried && nodeConfig.error">
          <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
        </div>
      </div>
    </div>
    <addNode :childNodeP.sync="nodeConfig.childNode" class="hide-add-btn" :data-state="nodeConfig.nodeStyle"></addNode>
  </div>
  <div class="branch-wrap" v-if="nodeConfig.type==4">
    <div class="branch-box-wrap">
      <div class="branch-box">
        <button class="add-branch">添加条件</button>
        <div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index">
          <div class="condition-node">
            <div class="condition-node-box">
              <div class="auto-judge" :class="isTried && item.error?'error active':''">
                <!-- <div class="sort-left" v-if="index != 0">&lt;</div> -->
                <div class="title-wrapper">
                  <input type="text" class="ant-input editable-title-input" v-if="isInputList[index]" @focus="$event.currentTarget.select()" v-focus v-model="item.nodeName">
                  <span class="editable-title" v-if="!isInputList[index]">{{item.nodeName}}</span>
                  <span class="priority-title">优先级{{item.priorityLevel}}</span>
                  <!-- <i class="anticon anticon-close close"></i> -->
                </div>
                <!-- <div class="sort-right" v-if="index != nodeConfig.conditionNodes.length-1">&gt;</div> -->
                <div class="content">{{$func.conditionStr(nodeConfig,index)}}</div>
                <div class="error_tip" v-if="isTried && item.error">
                  <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
                </div>
              </div>
              <addNode :childNodeP.sync="item.childNode" class="hide-add-btn"></addNode>
            </div>
          </div>
          <followWorkShow v-if="item.childNode && item.childNode" :nodeConfig.sync="item.childNode" :tableId="tableId" :isTried.sync="isTried"></followWorkShow>
          <div class="top-left-cover-line" v-if="index == 0"></div>
          <div class="bottom-left-cover-line" v-if="index == 0"></div>
          <div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
          <div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
        </div>
      </div>
      <addNode :childNodeP.sync="nodeConfig.childNode" class="hide-add-btn"></addNode>
    </div>
  </div>
  <followWorkShow v-if="nodeConfig.childNode && nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode" :tableId="tableId" :isTried.sync="isTried"></followWorkShow>

  <!-- <div class="mask-view" v-show="isView"></div> -->
</div>
</template>

<script>
export default {
  name: 'followWorkShow',
  props: ["nodeConfig", "flowPermission", "isTried", "tableId", "isView"],
  data() {
    return {
      placeholderList: ["发起人", "审核人", "抄送人"],
      isInputList: [],
      isInput: false,
    }
  },
  mounted() {
    /* if (this.nodeConfig.type == 1) {
      this.nodeConfig.error = !this.$func.setApproverStr(this.nodeConfig)
    } else if (this.nodeConfig.type == 2) {
      this.nodeConfig.error = !this.$func.copyerStr(this.nodeConfig)
    } else if (this.nodeConfig.type == 4) {
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
    } */

  },
  computed: {
    flowPermission1() {
      return this.$store.state.flowPath.flowPermission
    },
    approverConfig1() {
      return this.$store.state.flowPath.approverConfig
    },
    copyerConfig1() {
      return this.$store.state.flowPath.copyerConfig
    },
    conditionsConfig1() {
      return this.$store.state.flowPath.conditionsConfig
    },
  },
  watch: {
    flowPermission1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:flowPermission', data.value)
      }
    },
    approverConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:nodeConfig', data.value)
      }
    },
    copyerConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:nodeConfig', data.value)
      }
    },
    conditionsConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:nodeConfig', data.value)
      }
    },
  },
  methods: {
    clickEvent(index) {
      //   if (this.isView == false || this.isView == undefined) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, true)
      } else {
        this.isInput = true;
      }
      //   }
    },
    blurEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, false)
        this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName ? this.nodeConfig.conditionNodes[index].nodeName : "条件"
      } else {
        this.isInput = false;
        this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
      }
    },
    delNode() {
      this.$emit("update:nodeConfig", this.nodeConfig.childNode);
    },
    addTerm() {
      let len = this.nodeConfig.conditionNodes.length + 1
      this.nodeConfig.conditionNodes.push({
        "nodeName": "条件" + len,
        "type": 3,
        "priorityLevel": len,
        "conditionList": [],
        "nodeUserList": [],
        "childNode": null
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    },
    delTerm(index) {
      this.nodeConfig.conditionNodes.splice(index, 1)
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
        item.nodeName = `条件${index + 1}`
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
      if (this.nodeConfig.conditionNodes.length == 1) {
        if (this.nodeConfig.childNode) {
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
          } else {
            this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
          }
        }
        this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData
      } else {
        this.reData(data.childNode, addData)
      }
    },
    setPerson(priorityLevel) {
      var {
        type
      } = this.nodeConfig;
      if (type == 0) {
        this.$store.commit('updatePromoter', true)
        this.$store.commit('updateFlowPermission', {
          value: this.flowPermission,
          flag: false,
          id: this._uid
        })
      } else if (type == 1) {
        this.$store.commit('updateApprover', true)
        this.$store.commit('updateApproverConfig', {
          value: {
            ...JSON.parse(JSON.stringify(this.nodeConfig)),
            ...{
              settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1
            }
          },
          flag: false,
          id: this._uid
        })
      } else if (type == 2) {
        this.$store.commit('updateCopyer', true)
        this.$store.commit('updateCopyerConfig', {
          value: JSON.parse(JSON.stringify(this.nodeConfig)),
          flag: false,
          id: this._uid
        })
      } else {
        this.$store.commit('updateCondition', true)
        this.$store.commit('updateConditionsConfig', {
          value: JSON.parse(JSON.stringify(this.nodeConfig)),
          priorityLevel,
          flag: false,
          id: this._uid
        })
      }
    },
    arrTransfer(index, type = 1) { //向左-1,向右1
      this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0];
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    }
  }
}
</script>
<style src="../css/override-element-ui.css" scoped>
</style>
<style>
.error_tip {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(150%, 0px);
  font-size: 24px;
}

.promoter_person .el-dialog__body {
  padding: 10px 20px 14px 20px;
}

.selected_list {
  margin-bottom: 20px;
  line-height: 30px;
}

.selected_list span {
  margin-right: 10px;
  padding: 3px 6px 3px 9px;
  line-height: 12px;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid rgba(220, 220, 220, 1);
}

.selected_list img {
  margin-left: 5px;
  width: 7px;
  height: 7px;
  cursor: pointer;
}

/* S 预览时 */
.hide-add-btn .add-node-btn span {
  display: none !important
}

.mask-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1998;
}

.add-branch {
  /* 添加条件按钮 */
  display: none !important;
}

.branch-box {
  margin-top: 0 !important;
}

/* .add-node-btn span {
  display: none !important;
} */

/* E 预览时 */



.dingflow-design .add-node-btn-box[data-state="this"]::before {
  /* background-color: #E6A23C; */
}
/* E 节点中间竖线 */

.node-wrap-box[data-state="this"] {
/*   color: #fff;
  border: 2px solid #E6A23C;
  background-color: #E6A23C98; */
}
/* E 节点卡片 */

.node-wrap-box[data-state="this"]::before {
  /* border-color: #E6A23C transparent transparent; */
}
/* E 节点中间三角形 */

.dingflow-design .add-node-btn-box[data-state="pass"]::before {
  /* background-color: #67C23A; */
}
.node-wrap-box[data-state="pass"] {
  /* color: #fff; */
  /* border: 2px solid #67C23A; */
  /* background-color: #67C23A98; */
}
.node-wrap-box[data-state="pass"]::before {
  /* border-color: #67C23A transparent transparent; */
}

.dingflow-design .add-node-btn-box[data-state="nopass"]::before {
  /* background-color: #F56C6C; */
}
.node-wrap-box[data-state="nopass"] {
  /* color: #fff; */
  /* border: 2px solid #f00; */
  /* background-color: #F56C6C98; */
}
.node-wrap-box[data-state="pass"]::before {
  /* border-color: #f00 transparent transparent; */
}

.dingflow-design .add-node-btn-box[data-state="without"]::before {
  background-color: #909399;
}
.node-wrap-box[data-state="without"],
.node-wrap-box[data-state="without"] .title {
  color: #6c7170!important;
  background-color: #d9d9d9 !important;
}
.node-wrap-box[data-state="without"]::before {
  border-color: #909399 transparent transparent;
}


</style>
